<template>
  <el-dialog
    title="题目预览"
    :visible="dialogVisible"
    width="40%"
    @close="close"
  >
    <ul class="headpre">
      <li>【题型】:{{ formateques(timuList.questionType) }}</li>
      <li>【编号】：{{ timuList.id }}</li>
      <li>【难度】：{{ formatediff(timuList.difficulty) }}</li>
      <li>【标签】：{{ timuList.tags }}</li>
      <li>【学科】：{{ timuList.subjectName }}</li>
      <li>【目录】：{{ timuList.directoryName }}</li>
      <li>【方向】：{{ timuList.direction }}</li>
    </ul>
    <div class="tigan">
      【题干】：
      <div class="timu" v-html="timuList.question"></div>
      <div class="danxuan" v-if="timuList.questionType == 1">
        <p>
          {{
            formateques(timuList.questionType)
          }}题选项：（以下选中的选项为正确答案）
        </p>
        <!-- <el-radio-group v-model="right">
          <el-radio
            :label="item.isRight"
            v-for="item in timuList.options"
            :key="item.id"
            >{{ item.title }}</el-radio
          >
        </el-radio-group> -->
        <el-radio-group v-model="right">
          <el-radio
            :label="item.isRight"
            v-for="item in timuList.options"
            :key="item.id"
            :disabled="item.isRight != 1"
            >{{ item.title }}</el-radio
          >
        </el-radio-group>
      </div>
      <div class="duoxuan" v-if="timuList.questionType == 2">
        <p>
          {{
            formateques(timuList.questionType)
          }}题选项：（以下选中的选项为正确答案）
        </p>
        <!-- <el-checkbox-group v-model="rightlist">
          <el-checkbox
            :label="item.isRight"
            v-for="item in timuList.options"
            :key="item.id"
            >{{ item.title }}</el-checkbox
          >
        </el-checkbox-group> -->
        <el-checkbox-group v-model="rightlist">
          <el-checkbox
            :label="item.isRight"
            v-for="item in timuList.options"
            :key="item.id"
            :disabled="item.isRight != 1"
            >{{ item.title }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </div>
    <div class="answer">
      【参考答案】：<el-button type="danger" @click="openvideo"
        >视频答案预览</el-button
      >
      <video
        v-show="display"
        :src="timuList.videoURL"
        controls
        width="350"
        height="200"
      ></video>
    </div>
    <div class="jiexi">
      【答案解析】：<span v-html="timuList.answer"></span>
    </div>
    <div class="beizhu">【题目备注】:{{ timuList.remarks }}</div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close" type="primary">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
// import { update } from "../../api/hmmm/directorys";
import { questionType, difficulty } from '../../api/hmmm/constants'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    previewlist: {
      type: Object,
      required: true
    }
  },
  watch: {
    previewlist(val) {
      this.timuList = val
    }
  },
  data() {
    return {
      rightlist: [1],
      timuList: this.previewlist,
      right: 1,
      display: false
    }
  },
  methods: {
    close() {
      this.timuList = []
      this.$emit('update:dialogVisible', false)
    },
    formatediff(str) {
      let diff = ''
      difficulty.forEach((item) => {
        if (str == item.value) {
          diff = item.label
        }
      })
      return diff
    },
    // 题型格式化
    formateques(str) {
      let ques = ''
      questionType.forEach((item) => {
        if (str == item.value) {
          ques = item.label
        }
      })
      return ques
    },
    openvideo() {
      this.display = true
    }
  }
}
</script>

<style scoped >
.headpre {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid rgb(139, 135, 135);
  padding-left: 0;
  padding-bottom: 10px;
}
.tigan,
.answer,
.jiexi {
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(139, 135, 135);
  line-height: 30px;
}
.beizhu {
  line-height: 30px;
}
.headpre li {
  list-style: none;
  width: 25%;
  line-height: 30px;
}
.timu {
  color: blue;
}
video {
  display: block;
}
::v-deep .el-dialog__footer {
  text-align: right;
}
::v-deep .el-radio,
::v-deep .el-checkbox {
  display: block;
  line-height: 30px;
}
</style>
